<template>
  <strong style="font-size: 25px">投诉举报处理</strong>

  <el-tabs v-model="activeTab" class="custom-tabs">
    <el-tab-pane label="待处理" name="pending">
      <el-card
        class="transaction-card"
        shadow="hover"
        style="position: relative; min-height: 800px"
      >

      <!-- 如果 <el-input v-model="searchEmp.xxx" />，就和 searchEmp.xxx 双向绑定。 -->
        <!-- 搜索区域 -->
        <div style="display: flex; align-items: center; margin-bottom: 16px;">
          <el-form :inline="true" :model="searchEmp" class="date-range-picker">
            <el-form-item label="提交时间">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :shortcuts="shortcuts"
                @change="handleDateChange"
                style="width: 260px;"
              />
            </el-form-item>
          </el-form>
          <div style="margin-left: auto; display: flex; align-items: center;">
            <el-input
              v-model="searchText"
              placeholder="输入编号或提交人信息进行搜索"
              style="width: 260px;"
              clearable
            />
            <el-button type="primary" style="margin-left: 8px;">搜索</el-button>
          </div>
        </div>
        <!-- 表格区域 -->
        <el-table :data="pendingList" border size="small" style="width: 100%" :header-cell-style="{background: '#f8f8f9', color: '#333', fontWeight: 'bold'}">
          <el-table-column prop="no" label="编号" width="90" align="center" />
          <el-table-column prop="target" label="举报对象" min-width="180" show-overflow-tooltip />
          <el-table-column prop="content" label="举报内容" min-width="120" show-overflow-tooltip />
          <el-table-column prop="reporter" label="举报人" width="100" align="center" />
          <el-table-column prop="phone" label="手机号" width="120" align="center" />
          <el-table-column prop="status" label="状态" width="90" align="center">
            <template #default="scope">
              <span style="color: #faad14; font-weight: bold;"><i style="font-size: 14px; vertical-align: middle; color: #faad14;">●</i> 待处理</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="提交时间" width="160" align="center" />
          <el-table-column label="操作" width="120" align="center">
            <template #default>
              <el-link type="primary" :underline="false">查看</el-link>
              <el-link type="primary" :underline="false" style="margin-left: 8px;">确认处理</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
            <!-- 分页组件Pagination -->
             <br><br>
             <div>
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[5, 10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

        </div>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="处理记录" name="record">
      <el-card
        class="transaction-card"
        shadow="hover"
        style="position: relative; min-height: 800px"
      >
        <!-- 搜索区域 -->
        <div style="display: flex; align-items: center; margin-bottom: 16px;">
          <el-form :inline="true" class="date-range-picker">
            <el-form-item label="提交时间">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :shortcuts="shortcuts"
                @change="handleDateChange"
                style="width: 260px;"
              />
            </el-form-item>
          </el-form>
          <div style="margin-left: auto; display: flex; align-items: center;">
            <el-input
              v-model="searchText"
              placeholder="输入编号或提交人信息进行搜索"
              style="width: 260px;"
              clearable
            />
            <el-button type="primary" style="margin-left: 8px;">搜索</el-button>
          </div>
        </div>
        <!-- 表格区域 -->
        <el-table :data="recordList" border size="small" style="width: 100%" :header-cell-style="{background: '#f8f8f9', color: '#333', fontWeight: 'bold'}">
          <el-table-column prop="no" label="编号" width="90" align="center" />
          <el-table-column prop="target" label="举报对象" min-width="180" show-overflow-tooltip />
          <el-table-column prop="content" label="举报内容" min-width="120" show-overflow-tooltip />
          <el-table-column prop="reporter" label="举报人" width="100" align="center" />
          <el-table-column prop="phone" label="手机号" width="120" align="center" />
          <el-table-column prop="status" label="状态" width="90" align="center">
            <template #default="scope">
              <span style="color: #52c41a; font-weight: bold;"><i style="font-size: 14px; vertical-align: middle; color: #52c41a;">●</i> 已处理</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="提交时间" width="160" align="center" />
          <el-table-column label="操作" width="80" align="center">
            <template #default>
              <el-link type="primary" :underline="false">查看</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="margin-top: 16px; text-align: right;">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          />
        </div>
      </el-card>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeTab = ref('pending')
const dateRange = ref([])
const searchText = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(80)

// 添加缺失的 searchEmp 变量
const searchEmp = ref({})

// 添加缺失的分页处理函数
const handleSizeChange = (size: number) => {
  pagination.value.pageSize = size
  // 这里可以添加重新加载数据的逻辑
}

const handleCurrentChange = (page: number) => {
  pagination.value.currentPage = page
  // 这里可以添加重新加载数据的逻辑
}

const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    }
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    }
  }
]

const handleDateChange = () => {}

// 静态数据模拟
const pendingList = [
  { no: '100001', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规，不实信息', reporter: '陈添添', phone: '15757179146', status: '待处理', date: '2025/05/15 23:59' },
  { no: '100002', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '陈敬刚', phone: '15757179145', status: '待处理', date: '2025/05/15 23:59' },
  { no: '100003', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '董强强', phone: '15757179144', status: '待处理', date: '2025/05/15 23:59' },
  { no: '100004', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '沈家辉', phone: '15757179143', status: '待处理', date: '2025/05/15 23:59' },
  { no: '100005', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '叶慧斌', phone: '15757179142', status: '待处理', date: '2025/05/15 23:59' },
  { no: '100006', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '米鑫', phone: '15757179141', status: '待处理', date: '2025/05/15 23:59' },
  { no: '100007', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '朱晨韬', phone: '15757179140', status: '待处理', date: '2025/05/15 23:59' },
  { no: '100008', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '王琪', phone: '15757179139', status: '待处理', date: '2025/05/15 23:59' },
  { no: '100009', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '谢玉荣', phone: '15757179138', status: '待处理', date: '2025/05/15 23:59' },
  { no: '100010', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '许贯桑', phone: '15757179137', status: '待处理', date: '2025/05/15 23:59' }
]

const recordList = [
  { no: '100001', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规，不实信息', reporter: '陈添添', phone: '15757179146', status: '已处理', date: '2020/09/07 23:59' },
  { no: '100002', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '陈敬刚', phone: '15757179145', status: '已处理', date: '2020/09/07 23:59' },
  { no: '100003', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '董强强', phone: '15757179144', status: '已处理', date: '2020/09/07 23:59' },
  { no: '100004', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '沈家辉', phone: '15757179143', status: '已处理', date: '2020/09/07 23:59' },
  { no: '100005', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '叶慧斌', phone: '15757179142', status: '已处理', date: '2020/09/07 23:59' },
  { no: '100006', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '米鑫', phone: '15757179141', status: '已处理', date: '2020/09/07 23:59' },
  { no: '100007', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '朱晨韬', phone: '15757179140', status: '已处理', date: '2020/09/07 23:59' },
  { no: '100008', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '王琪', phone: '15757179139', status: '已处理', date: '2020/09/07 23:59' },
  { no: '100009', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '谢玉荣', phone: '15757179138', status: '已处理', date: '2020/09/07 23:59' },
  { no: '100010', target: '这里是活动名称或举报对象名称这里是活动名称', content: '违法违规', reporter: '许贯桑', phone: '15757179137', status: '已处理', date: '2020/09/07 23:59' }
]


const pagination = ref({currentPage: 1, pageSize: 5, total: 0})
</script>

<style scoped>
.transaction-card {
  width: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  padding: 0 0 10px 0;
}
</style>
